<template>
  <div class="login">
    <div class="container">
      <h1>短信登录</h1>
      <qf-form
        :formItem="formItem"
        :formBtns="formBtns"
        ref="formRef"
      ></qf-form>

      <!-- 
        倒计时 
        准备：文字使用模型数据，disabled也是用模型数据、定义倒计时变量默认10 绑定点击事件

        1 事件处理函数中：先禁用按钮、时间--、变文字
        2 事件处理函数中：定时器 每隔1s     时间--、变文字
        3 事件处理函数中：定时器里面判断如果<=1        清除定时器/时间恢复/文字恢复/按钮恢复
        4 请求接口获取短信
      -->
      <el-button class="smsBtn" :disabled="smsDisabled" @click="handleSms">
        {{ smsText }}
      </el-button>
      <!-- 倒计时 -->
    </div>
  </div>
</template>

<script>
// import { postSmsApi, postSmsLoginApi } from "@/api/sms";
import { postSmsApi } from "@/api/sms";
import { mapActions } from "vuex";
export default {
  methods: {
    async handleSms() {
      // 1 事件处理函数中：先禁用按钮、时间--、变文字
      this.smsDisabled = true;
      this.smsTime--;
      this.smsText = `重新获取(${this.smsTime})`;
      // 2 事件处理函数中：定时器 每隔1s     时间--、变文字
      this.smsT = setInterval(() => {
        // 3 事件处理函数中：定时器里面判断如果<=1        清除定时器/时间恢复/文字恢复/按钮恢复
        if (this.smsTime <= 1) {
          clearInterval(this.smsT);
          this.smsTime = 10;
          this.smsText = "获取验证码";
          this.smsDisabled = false;
          return;
        }
        this.smsTime--;
        this.smsText = `重新获取(${this.smsTime})`;
      }, 1000);
      // 4 请求接口获取短信
      const res = await postSmsApi(this.$refs.formRef.formData);
      if (res.meta.state === 201) {
        this.$message.success(res.meta.msg);
      } else {
        this.$message.error(res.meta.msg);
      }
    },
    ...mapActions({
      login: "user/FETCH_SMS_LOGIN",
    }),
  },
  data() {
    // 1 定义
    const checkMobile = (rules, value, callback) => {
      if (/^1\d{10}$/.test(value)) {
        callback();
      } else {
        callback(new Error("手机格式有误"));
      }
    };
    // 2 返回
    return {
      // 获取验证码
      smsT: null,
      smsTime: 10,
      smsDisabled: false,
      smsText: "获取验证码",
      // 表单配置
      formItem: [
        // ...
        {
          rules: [
            { required: true, message: "手机号必须", trigger: "blur" },
            { validator: checkMobile, trigger: "blur" },
          ],

          field: "mobile",

          placeholder: "请输入手机号",
          icon: "el-icon-user-solid",
          type: "input",
        },
        {
          rules: [{ required: true, message: "验证码", trigger: "blur" }],
          field: "code",

          placeholder: "请输入验证码",
          icon: "el-icon-lock",
          type: "input",
        },
        // ...
      ],
      // 表单按钮组
      formBtns: [
        {
          icon: "el-icon-back",
          type: "",
          click: () => this.jump("/login"),
        },
        {
          content: "登录",
          type: "primary",
          click: async (formData) => {
            console.log("表单数据", formData);

            const res = await this.login(formData);
            if (res.meta.state === 200) {
              this.$message.success(res.meta.msg);
              this.jump("/");
            } else {
              // 密保写错了、密码错了、用户不存在
              this.$message.error(res.meta.msg);
            }

            // const res = await postSmsLoginApi(formData);
            // if (res.meta.state == 200) {
            //   this.$message.success(res.meta.msg);
            //   localStorage.setItem("uname", res.data.uname);
            //   localStorage.setItem("roleName", res.data.roleName);
            //   localStorage.setItem("token", res.data.token);
            //   this.jump("/");
            // } else {
            //   this.$message.error(res.meta.msg);
            // }
          },
        },
      ],
      // ...
    };
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;

  display: flex;
  justify-content: center;
  align-items: center;

  .container {
    width: 300px;
    position: relative;
    // 验证码
    .smsBtn {
      position: absolute;
      right: 0;
      bottom: 85px;
      width: 120px !important;

      border: none;
    }

    // 短信表单
    h1 {
      color: #fff;
      font-size: 50px;
      margin-bottom: 15px;
      text-align: center;
    }
    :deep(.el-select) {
      width: 100% !important;
    }
    :deep(.el-button) {
      width: 30px;
      i {
        margin-left: -8px;
      }
      &:last-child {
        width: calc(100% - 56px);
      }
    }
  }
}
</style>
